/* eslint-disable no-param-reassign */
<template>
  <div class="h-full">
    <n-card title="设备异常报修" class="h-full shadow-sm rounded-16px">
      <n-space class="w-full">
        <n-form-item label="车间:">
          <n-select filterable :options="areas" />
        </n-form-item>
        <n-form-item label="设备:">
          <n-select filterable :options="machines" />
        </n-form-item>
      </n-space>
      <n-divider />

      <n-form-item label="设备报修照片">
        <n-upload
          multiple
          directory-dnd
          action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
          style="margin-top: 10px"
        >
          <n-upload-dragger>
            <div style="margin-bottom: 12px">
              <icon-upload :depth="3" />
            </div>
            <n-text style="font-size: 16px">点击或者拖动文件到该区域来上传</n-text>
            <n-p depth="3" style="margin: 8px 0 0 0">
              请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
            </n-p>
          </n-upload-dragger>
        </n-upload>
      </n-form-item>
      <n-divider />
      <n-button type="primary">
        <template #icon><icon-carbon:cloud-auditing /></template>
        提交
      </n-button>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, watch } from 'vue';

const areas = [
  {
    label: 'S1',
    value: 'S1',
    disabled: false
  },
  {
    label: 'S2',
    value: 'S2'
  },
  {
    label: 'S3',
    value: 'S3'
  }
];

const machines = [
  {
    label: 'TK001001',
    value: 'TK001001',
    disabled: false
  }
];
// form
const inspectForm = reactive({
  name: '',
  parms: [
    { parm: '温度', value: '', target: 28, uplimit: 32, lowlimit: 24, pass: false },
    { parm: '湿度', value: '', target: 56, uplimit: 66, lowlimit: 46, pass: false },
    { parm: '压强', value: '', target: 233, uplimit: 335, lowlimit: 231, pass: false },
    { parm: '气流', value: '', target: 233, uplimit: 335, lowlimit: 231, pass: false },
    { parm: '电压', value: '', target: 1007, uplimit: 1200, lowlimit: 800, pass: false }
  ]
});

onMounted(() => {
  // eslint-disable-next-line no-console
  console.log('mounted');
});

watch(
  inspectForm,
  () => {
    inspectForm.parms.forEach(item => {
      if (Number(item.value) > item.uplimit) {
        // eslint-disable-next-line no-param-reassign
        item.pass = false;
      } else if (Number(item.value) < item.lowlimit) {
        // eslint-disable-next-line no-param-reassign
        item.pass = false;
      } else {
        // eslint-disable-next-line no-param-reassign
        item.pass = true;
      }
    });
  },
  {
    // 首次渲染组件就触发一次
    immediate: true
  }
);
</script>
<style scoped></style>
